<%-- 
    Document   : backupManagement
    Created on : Jun 15, 2011, 10:43:00 AM
    Author     : javauser
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Backup</title>
        <link rel="stylesheet" media="all" type="text/css" href="css/jquery-ui-1.8.6.custom.css" />
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

        <style>
            .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
            .ui-timepicker-div dl{ text-align: left; }
            .ui-timepicker-div dl dt{ height: 25px; }
            .ui-timepicker-div dl dd{ margin: -25px 10px 10px 65px; }
            .ui-timepicker-div td { font-size: 90%; }
        </style>
    </head>
    <body>
        <h1>Files & Log Backup</h1>
        <html:form action="/backupURL.do">
            <table id="myTable" width="50%">
                <tr>
                    <td>Type: </td>
                    <td>
                        <html:select styleId="type" property="actionType" onchange="expandPage()" >
                            <html:option value="s">Select</html:option>
                            <html:option value="backupFiles">Files</html:option>
                            <html:option value="backupLog">Log</html:option>
                        </html:select>
                    </td>
                </tr>
                <tr>
                    <td>Host name: </td>
                    <td><html:text property="hostName" /></td>
                </tr>
                <tr>
                    <td>Username: </td>
                    <td><html:text property="ftpUsername" /></td>

                </tr>
                <tr>
                    <td>Password: </td>
                    <td><html:text property="ftpPassword" /></td>

                </tr>
                <tr id="myRow"></tr
                <tr><td colspan="2"><html:submit value="Begin backup" /></td></tr>
            </table>
        </html:form>
        <script type="text/javascript">
            
            function expandPage(){
                var x = document.getElementById("myRow");
                var t = document.getElementById("type").selectedIndex;
                x.innerHTML="";
                y = document.createElement("td");
                z = document.createElement("td");
                
                switch(t) {
                    case 1: 
                        y.innerHTML = "Supplier: ";
                        y.setAttribute("valign", "top");
                        z.setAttribute("id", "result");
                        search();
                        break;
                    case 2:
                    
                        y.innerHTML = "Date: ";
                        y.setAttribute("valign", "top");
                        //inputDate = document.createElement("input");
                        //inputDate.setAttribute("id", "startDate");
                        //z.appendChild(inputDate)
                        z.innerHTML="<input type=\"text\" name=\"date\" id=\"startDate\"/>";
                        break;
                
                }
                x.appendChild(y);
                x.appendChild(z);
            }
        
            var xmlhttp;
            function search()
            {
                // var searchtext=document.getElementById("stext").value;
                // var divresult=document.getElementById("logdiv");
                // divresult.innerHTML="";
                
                
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
               
                xmlhttp.onreadystatechange=handleRequest;
                xmlhttp.open("GET","search.do",true);
                xmlhttp.send();
            
            
            }
            function handleRequest(){
                if(xmlhttp.readyState==4){
                    var divresult=document.getElementById("result");
                    var get=xmlhttp.responseText;
                    var result=get.split(",");
                    var ret="";            
                    if(get[0]==" ")
                    { 
                  
                        ret="";
                 
                     
                    }
                    else{  
                  
                        ret+="<select id=\"providers\" name=\"suppliers\" style=\"width:165px\" onchange=\"check()\" multiple=\"true\" > ";
                        
                        for (i = 0; i < result.length; i++) {
                    
                            ret+="<option value=\""+result[i]+"\" >  "+result[i]+" </option> ";
                        }
                        ret+="</select><br/><input id=\"selectAll\" type=\"checkbox\" onchange=\"change()\" />Select all  ";
                
                    }
                    divresult.innerHTML=ret;
                }
            }
            function change() {
                select = document.getElementById("providers");
                if (document.getElementById("selectAll").checked == true) {
                    for (i=0 ; i<select.options.length ; i++) {
                        select.options[i].selected = true;
                    }
                    //select.disabled=true;
                }
                if (document.getElementById("selectAll").checked == false) {
                    //select.disabled=false;
                    for (i=0 ; i<select.options.length ; i++) {
                        select.options[i].selected = false;
                    }
                }
            }
            function check() {
                deselected = false;
                select = document.getElementById("providers");
                for (i=0 ; i<select.options.length || deselected ; i++) {
                        if(select.options[i].selected == false) {
                            document.getElementById("selectAll").checked = false;
                            deselected = true ;
                        }
                    }
            }
        </script>
        <script>
            document.addEventListener("DOMNodeInserted", function() {
                $(function() {
                    $( "#startDate" ).datepicker();
                })}, false);
            
        </script>
    </body>
</html>
